<script setup lang="ts">
import { debounce } from '@/utils'
import { computed } from 'vue'
import { onMounted, ref } from 'vue'

type Props = {
  imgWidth?: number
  imgHeight?: number
  glassWidth?: number
  glassHeight?: number
  rate?: number
  imgList: string[]
  smallImgSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  imgWidth: 480,
  imgHeight: 480,
  glassWidth: 960,
  glassHeight: 960,
  rate: 2,
  smallImgSize: 80
})

const glassTop = ref(0)
const glassLeft = ref(0)
const bigImgRef = ref<any>()
const bigImgLeft = ref(0)
const bigImgTop = ref(0)

const handleMouseMove = (e: MouseEvent) => {
  const { pageX, pageY } = e
  const { x, y } = bigImgRef.value!
  let leftValue = (pageX - (x + document.documentElement.scrollLeft)) * 2 - props.imgWidth / 2
  let topValue = (pageY - (y + document.documentElement.scrollTop)) * 2 - props.imgHeight / 2

  glassLeft.value = -Math.max(0, Math.min(leftValue, 480))
  glassTop.value = -Math.max(0, Math.min(topValue, 480))
}

let isFirstEnter = false
const isGlassShow = ref(false)
const handleMouseEnter = () => {
  if (!isFirstEnter) {
    bigImgRef.value = document.querySelector('.arco-image-img')
    isFirstEnter = true
  }
  isGlassShow.value = true
}
const handleMouseLeave = () => {
  isGlassShow.value = false
}

// 小图子项的大小
const smallBoxHeightTotal = ref(0)
onMounted(() => {
  smallBoxHeightTotal.value = props.imgList.length * props.smallImgSize
  console.log(smallBoxHeightTotal.value)
})
const moveValue = props.smallImgSize + 10
const currentMoveValue = ref(0)
const isShowUpArrow = ref(false)
const isShowDownArrow = ref(false)
const count = 4

const len = props.imgList.length
if (len > count) {
  isShowDownArrow.value = true
}
const selectedIndex = ref(0)
// 处理移动
const handleMoveSmallImgItem = (mode: 'up' | 'down') => {
  if (mode === 'up') {
    currentMoveValue.value -= moveValue
  } else if (mode === 'down') {
    currentMoveValue.value += moveValue
  }
  isShowUpArrow.value = currentMoveValue.value > 0
  isShowDownArrow.value = currentMoveValue.value < Math.max(0, moveValue * (len - count))

  console.log(currentMoveValue.value)
}

const curImg = computed(() => props.imgList[selectedIndex.value])
</script>

<template>
  <div class="flex gap-15">
    <!-- 左侧小图列表 -->
    <div class="flex flex-col gap-2.5 mt-10">
      <div class="h-6">
        <icon-up
          v-show="isShowUpArrow"
          @click="handleMoveSmallImgItem('up')"
          class="text-2xl text-center w-full cursor-pointer h-full"
        />
      </div>
      <div class="h-350px w-80px overflow-hidden">
        <div
          ref="smallBoxRef"
          class="flex flex-col gap-2.5 transition-all transition-delay-200"
          :style="{ transform: `translateY(-${currentMoveValue}px)` }"
        >
          <div
            v-for="(url, index) in imgList"
            :style="{ height: smallImgSize + 'px' }"
            @click="selectedIndex = index"
            class="w-full flex-shrink-0 cursor-pointer bg-gray-3 border-solid border-white border-2"
            :class="{ 'border-gray!': index === selectedIndex }"
          >
            <img class="w-full h-full" :src="url" alt="" />
          </div>
        </div>
      </div>
      <div class="h-6">
        <icon-down
          v-show="isShowDownArrow"
          @click="handleMoveSmallImgItem('down')"
          class="text-2xl text-center w-full cursor-pointer h-full"
        />
      </div>
    </div>

    <!-- 大图 -->
    <div class="pos-relative overflow-hidden" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <a-image ref="bigImgRef" class="object-cover" :src="curImg" :width="imgWidth" :height="imgHeight" />
      <Transition>
        <div
          @mousemove="handleMouseMove"
          v-show="isGlassShow"
          class="pos-absolute bg-black bg-opacity-20 overflow-hidden"
          :style="{
            width: glassWidth + 'px',
            height: glassHeight + 'px',
            top: glassTop + 'px',
            left: glassLeft + 'px'
          }"
        >
          <img :src="imgList[selectedIndex]" class="pos-relative object-cover w-full h-full" />
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease-out;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
